import React, { useEffect, useState } from 'react'
import { XoProTable } from '@/components/XoProTable';
import styles from './nickName.less';
import type { ProColumns } from '@ant-design/pro-table';
import type { CourseData } from '@/models/coursedata';
import { groupOptionList, interactivePlaybackList } from '@/services/situation';
import { ProFormSelect } from '@ant-design/pro-form';
import { onRequestNickName } from '@/utils/requestPhone';
import { history } from 'umi';
export default function Interact(props: any) {
  // const itemId = history.location.query?.id;
  const activityId = history.location.query?.activityId;
  const [selectData, setData] = useState<any>([]);
  const { stepIdNew } = props;
  useEffect(() => {
    (async () => {
      const res = await groupOptionList({ activityId: activityId })
      const res1 = res?.result?.map((item: any) => {
        return { label: item.name, value: item.id }
      })
      setData(res1)
    })();
  }, []);

  const classroomTime = (record: CourseData) => {
    if (record.inClassroomTime) {
      const res = parseInt(record.inClassroomTime);
      const h = Math.floor(res / 3600) < 10 ? '0' + Math.floor(res / 3600) : Math.floor(res / 3600);
      const m = Math.floor((res / 60 % 60)) < 10 ? '0' + Math.floor((res / 60 % 60)) : Math.floor((res / 60 % 60));
      let result = '';
      if (h !== '00') result += `${h}时`;
      if (m !== '00') result += `${m}分`;

      return result;
    }

  };
  const backTime = (record: CourseData) => {
    if (record.inPlaybackTime) {
      const res = parseInt(record.inPlaybackTime);
      const h = Math.floor(res / 3600) < 10 ? '0' + Math.floor(res / 3600) : Math.floor(res / 3600);
      const m = Math.floor((res / 60 % 60)) < 10 ? '0' + Math.floor((res / 60 % 60)) : Math.floor((res / 60 % 60));
      let result = '';
      if (h !== '00') result += `${h}时`;
      if (m !== '00') result += `${m}分`;

      return result;
    }
    return '-'
  };

  const columns: ProColumns<CourseData>[] = [
    {
      dataIndex: 'uid',
      title: '用户ID',
      search: false
    },
    {
      dataIndex: 'nickname',
      title: '用户昵称',
      search: false

    },
    {
      dataIndex: 'uid',
      title: '昵称/手机号',
      width: 150,
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormSelect
            wrapperCol={{ span: 24 }}
            showSearch
            debounceTime={500}
            name="uid"
            request={onRequestNickName}
          />
        )
      }
    },
    {
      dataIndex: 'startTime',
      title: '真实姓名',
      search: false
    },
    {
      dataIndex: 'phone',
      title: '手机号',
      search: false
    },
    {
      dataIndex: 'groupName',
      title: '班级',
      renderFormItem: () => {
        return (
          <ProFormSelect
            name="groupId"
            placeholder="请选择"
            debounceTime={500}
            colon={false}
            options={selectData}
          />
        )
      }
    },
    {
      dataIndex: 'teacherName',
      title: '辅导老师',
      search: false
    },
    {
      dataIndex: 'markQuestionRightRate',
      title: '标记题正确率',
      search: false,
      render: (_, record) => {
        return (
          <div>{record.markQuestionShow == 1 ? `${(record.markQuestionRightRate)?.toFixed(2)}%` : '-'}</div>
        )
      }
    },
    {
      dataIndex: 'sgfQuestionRightRate',
      title: '互动课件正确率',
      search: false,
      render: (_, record) => {
        return (
          <div>{record.sgfQuestionShow == 1 ? `${(record.sgfQuestionRightRate)?.toFixed(2)}%` : '-'}</div>
        )
      }
    },
    {
      dataIndex: 'signpert3',
      title: '查看学习报告',
      search: false,
      width: 100,
      fixed: 'right',
      render: (_, record) => {
        return (

          <div>{(record.markQuestionShow == 1 || record.sgfQuestionShow == 1) ? <a target="_blank" href={`/web/gospirit_webview/study_report?token=${localStorage.getItem('token')}&uid=${record.uid}&stepId=${stepIdNew}`} rel="noreferrer">查看学习报告</a> : '-'}</div>

        )
      }
    }
  ];

  return (
    <XoProTable
      className={styles.playlist}
      request={async (params) => {
        const body = (await interactivePlaybackList({ ...params, stepId: Number(stepIdNew) }))?.result;
        return {
          data: body?.records,
          total: body?.total,
        };
      }}
      options={false}
      rowKey="key"
      scroll={{ x: 1080 }}
      columns={columns}
      hasIndex={false}
    />
  )
}
